<template>
  <div v-if="!setting" style="position: relative">
    <Spin :withIcon="true" v-if="loading"></Spin>
    <div class="filter-line b-b-d flx-row-s-c">
      <span class="item-name">添加时间</span>
      <DatePicker
        :editable="false"
        type="daterange"
        split-panels
        placeholder="请选择"
        style="width: 300px"
        @on-change="dateChange"
        :value="time"
      ></DatePicker>
      <span class="item-name pub-m-l-40">提醒内容</span>
      <Input
        v-model.trim="keywords"
        placeholder="请输入"
        maxlength="50"
        style="width: 120px"
      />
    </div>
    <div class="filter-line flx-row-s-c">
      <div
        class="user-strong-button line-button-size"
        style="margin: 0 24px 0 0"
        @click="pageChange(1)"
      >
        搜索
      </div>
      <div class="user-normal-button line-button-size" @click="reset">重置</div>
    </div>

    <div class="listTable-area pub-m-t-20">
      <div class="filter-line search-result-line flx-row-bw-c">
        <span class="c-g f-14"
          >搜索结果共<span class="c-black">
            {{ total != null ? ` ${total} ` : "" }} </span
          >条</span
        >
      </div>
      <table class="table-area">
        <thead>
          <tr>
            <th><div class="line-style">序号</div></th>
            <th><div class="line-style">关键词</div></th>
            <th><div class="line-style">关键词匹配规则</div></th>
            <th><div class="line-style">域名构成</div></th>
            <th><div class="line-style">提醒方式</div></th>
            <th><div class="line-style">添加时间</div></th>
            <th><div class="line-style">操作</div></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">
            <td>
              <div class="line-style">
                <span class="normal-f">{{
                  (page - 1) * pageSize + index + 1
                }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f f-ell-sin" :title="item.keyword">{{
                  item.keyword
                }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="normal-f">
                  {{
                    item.mateType == 0
                      ? "完全匹配"
                      : item.mateType == 1
                      ? "包含"
                      : item.mateType == 2
                      ? "开头"
                      : "结尾"
                  }}
                </span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <span class="c-r f-ell-sin">{{ item.domainTypeName }}</span>
              </div>
            </td>
            <td>
              <div class="line-style">
                <div
                  class="normal-f"
                  v-for="(
                    remindTypeItem, remindTypeindex
                  ) in item.remindType.split(',')"
                  :style="{ marginLeft: remindTypeindex == 1 ? '10px' : '' }"
                  :key="remindTypeindex"
                >
                  {{ remindTypeItem == 0 ? "邮箱" : "短信" }}
                </div>
              </div>
            </td>
            <td>
              <div class="line-style normal-f">{{ item.createdTime }}</div>
            </td>
            <td>
              <div class="line-style normal-f">
                <div class="form-font-button" @click="edit(index)">编辑</div>
                <div class="form-font-button" @click="deleteRemind(item.id)">
                  删除
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <Empty-State
        v-if="total != null && total == 0"
        content="未搜索到任何内容！"
      ></Empty-State>
      <div class="form-page-bottom-area flx-row-c-c">
        <Page
          :total="total"
          :current="page"
          :page-size="pageSize"
          :page-size-opts="pageSizeOpts"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          show-elevator
          show-sizer
          show-total
        />
      </div>
    </div>
  </div>
  <setting
    v-else
    :setting="true"
    :info="info"
    @success="editSuccess"
    @cancel="clearEditForm"
  ></setting>
</template>

<script>
import { getRemindList, delRemind } from "@/api/user";
import { domainTypes } from "@/utils/publicData";
export default {
  name: "VipReminderList",
  components: {
    setting: () => import("./setting.vue"),
  },
  data() {
    return {
      loading: false,
      setting: false,
      // 表单数据
      time: [],
      startTime: "",
      endTime: "",
      keywords: "",

      // 分页设置
      total: null,
      pageSizeOpts: [10, 20, 50, 100, 200],
      pageSize: 10,
      page: 1,
      list: [],

      // 编辑表单
      info: {
        id: null,
        keywords: "",
        rule: "",
        domainType: null,
        searchMethod: [],
      },
      compositionList: [],
    };
  },
  created() {
    this.getDomainTypes();
    this.getRemindList();
  },
  activated() {
    if (sessionStorage.getItem("refresh-remark-list") == "1") {
      sessionStorage.setItem("refresh-remark-list", "0");
      this.reset();
    }
  },
  deactivated() {
    if (this.setting) {
      this.clearEditForm();
    }
  },
  methods: {
    async getDomainTypes() {
      let res = await domainTypes();
      this.compositionList = res;
    },
    // 获取列表
    async getRemindList() {
      this.loading = true;
      let data = {
        keywords: this.keywords,
        startTime: this.startTime,
        endTime: this.endTime,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getRemindList(data);
      if (res.code == 200) {
        if (
          this.page > 1 &&
          res.data.total <= (this.page - 1) * this.pageSize
        ) {
          this.page =
            res.data.total == 0 ? 1 : Math.ceil(res.data.total / this.pageSize);
          this.getRemindList();
          return;
        }
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 重置
    reset() {
      this.time = [];
      this.startTime = "";
      this.endTime = "";
      this.keywords = "";
      this.page = 1;
      this.getRemindList();
    },
    // 日期选择改变
    dateChange(date) {
      this.startTime = date[0];
      this.endTime = date[1];
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getRemindList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 删除
    deleteRemind(id) {
      this.$Modal.confirm({
        title: "删除确认",
        content: "<p>确定要删除此预订提醒吗？</p>",
        onOk: async () => {
          let res = await delRemind(id);
          if (res.code == 200) {
            this.$Message.success("删除成功！");
            this.getRemindList();
          }
        },
      });
    },
    // 编辑
    edit(index) {
      let infoTemp = this.list[index];
      this.info.id = infoTemp.id;
      this.info.keywords = infoTemp.keyword.replace(/,/g, "\n");
      this.info.rule = infoTemp.mateType;
      this.info.searchMethod = infoTemp.remindType.split(",");
      let domainTypeTemp = "2_" + infoTemp.domainType;
      for (let i in this.compositionList) {
        let children = this.compositionList[i].children;
        for (let j in children) {
          if (children[j].value == domainTypeTemp) {
            this.info.domainType = [
              this.compositionList[i].value,
              children[j].value,
            ];
            break;
          }
        }
      }
      this.setting = true;
    },
    // 编辑成功
    editSuccess() {
      this.clearEditForm();
      this.getRemindList();
    },
    // 清空编辑表单
    clearEditForm() {
      this.setting = false;
      this.info.id = null;
      this.info.keywords = "";
      this.info.rule = "";
      this.info.domainType = null;
      this.info.searchMethod = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.listTable-area {
  padding: 30px;
  position: relative;
  left: -30px;
  width: calc(100% + 60px);
  border-top: 20px solid #f3f6fb;
}
.mg-r-25 {
  margin-right: 25px;
}
</style>
